<template>
	<view>
		<view class="container">
			<view class="header">
				<view class="mark">
					票
				</view>
				<view class="title-text">
					手机号码登录
				</view>
			</view>
			<view class="content">
				<form action="">
					<view class="phone-num" v-show="userExist">
						{{loginData.username}}
					</view>
					<view class="input-box" v-show="!userExist">
						<view class="input-item">
							<input class="mobile-num-width" type="text" placeholder="请输入手机号"
								v-model="loginData.username" />
						</view>
						<view class="input-item">
							<input class="mobile-num-width" type="password" placeholder="请输入密码"
								v-model="loginData.password" />
						</view>
					</view>
					<view class="login-button">
						<button class="login-submit" v-show="!userExist" @click="login()">
							<text>登录</text>
						</button>
						<button class="login-submit" v-show="userExist" @click="loginLoginDataExist()">
							<text>一键登录</text>
						</button>
					</view>
				</form>
				<view class="describe-text" v-show="userExist" @click="loginChange()">切换到其他号码登录</view>
				<view class="fix-bottom">登录或注册代表您同意 <text class="red">用户服务协议</text></view>
			</view>
		</view>
		<uni-popup ref="messageRef" type="message">
			<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		onUnmounted,
		watch,
		watchEffect,
		getCurrentInstance,
		inject
	} from 'vue';


	let userExist = ref(false);
	const globalData = inject('globalData');
	const msgType = ref(null);
	//消息提示窗初始化
	const messageText = ref(null);
	//绑定消息提示窗
	const messageRef = ref(null);

	let loginChange = () => {
		userExist.value = !userExist.value;
		// uni.clearStorage();
	}

	const loginData = ref({
		username: "",
		password: ""
	})
	/**
	 * 登录功能
	 */
	let login = () => {
		console.log("loginData:", loginData.value);
		if (loginData.value.username == '' || loginData.value.password == '') {
			uni.showToast({
				title: '账号和密码不能为空!',
				icon: 'none'
			});
		} else {
			uni.request({
				url: '/st/user/login',
				data: loginData.value,
				method: 'POST',
				success: (res) => {
					console.log(res.data);
					if (res.data.code == 2000) {

					

						const loginUser = {
							username: res.data.data.username,
							password: res.data.data.password,
							id: res.data.data.id
						}

						console.log(loginUser);
						uni.setStorage({
							key: 'userLogin',
							data: loginUser,
							success: function() {
								console.log('用户名密码存储成功');
							},
							fail: function(err) {
								console.error('用户名密码存储失败');
							}
						});

						uni.switchTab({
							url: '/pages/index/index',
							animationType: 'pop-in',
							animationDuration: 200
						});
					} else if (res.data.code != 2000) {
						console.log("D奥所大所大所大多撒");

						uni.showToast({
							title: '账号或密码错误，请重新输入！',
							icon: 'none'
						});
						loginData.value.password = '';
					}
				}
			});
		}


	}


	const messageToggle = (typeValue) => {
		if (messageRef.value) {
			messageRef.value.open(); // 使用 messageRef 打开提示框
		} else {
			console.warn('messageRef is not yet available'); // 添加日志输出
		}
	};

	let loginLoginDataExist = () => {
		login();
	}



	onMounted(() => {
		uni.getStorage({
			key: 'userLogin',
			success: function(res) {
				console.log('获取的数据:', res.data);
				if (res.data) {
					loginData.value.username = res.data.username;
					loginData.value.password = res.data.password;
					userExist.value = true;
				}
			},
			fail: function(err) {
				console.error('获取数据失败', err);
			}
		});
	})
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		height: auto;
		box-sizing: border-box;
		padding: 0px 25px;

		.header {
			width: 100%;
			height: auto;
			padding-top: 45%;
			padding-bottom: 70px;
			float: left;

			.mark {
				width: 48px;
				height: 48px;
				background: linear-gradient(90deg, rgba(255, 98, 98, 1) 0%, rgba(255, 98, 98, 1) 0%, rgba(255, 153, 102, 1) 100%, rgba(255, 153, 102, 1) 100%);
				border-radius: 4px;
				line-height: 48px;
				text-align: center;
				font-size: 20px;
				font-weight: bold;
				color: #fff;
				float: left;
			}

			.title-text {
				float: left;
				height: 48px;
				margin-left: 20px;
				font-size: 24px;
				line-height: 48px;
			}
		}

		.content {
			padding: 30px 0px;
			width: 100%;
			height: auto;
			float: left;

			.input-box {
				margin-bottom: 50px;

				.input-item {
					margin-bottom: 20px;
					box-sizing: border-box;
					padding: 0px 15px;
					border-width: 1px;
					border-style: solid;
					border-color: rgba(228, 228, 228, 1);
					border-radius: 4px;
					height: 44px;
				}

				.input-item>input {
					height: 44px;
					float: left;
				}
			}

			.login-button {
				margin-top: 30px;
			}

			.login-submit {
				width: 100%;
				height: 44px;
				line-height: 44px;
				font-weight: 650;
				font-style: normal;
				font-size: 16px;
				color: #FFFFFF;
				background-color: rgba(255, 98, 98, 1);
				border: none;
				border-radius: 4px;

			}

			.get-code-btn {
				float: right;
				line-height: 44px;
				font-size: 14px;
			}

			.mobile-num-width {
				width: 80%;
			}

			.ver-code-width {
				width: 70%;
			}

			.describe-text {
				width: 100%;
				margin-top: 15px;
				text-align: center;
				line-height: 40px;
				color: #999;
				font-size: 14px;
			}

			.fix-bottom {
				position: fixed;
				bottom: 15px;
				text-align: center;
				line-height: 40px;
				color: #999;
				font-size: 14px;
				display: block;
				width: calc(100% - 50px);
			}

			.red {
				color: #FF6262;
			}

			.phone-num {
				width: 100%;
				text-align: center;
				font-weight: 500;
				font-style: normal;
				font-size: 18px;
			}
		}


	}

	.uni-easyinput__content-input {
		width: auto;
		position: relative;
		overflow: hidden;
		flex: 1;
		line-height: 1;
		font-size: 18px;
		height: 44px !important;
	}

	.uni-easyinput__placeholder-class {
		color: #999;
		font-size: 16px !important;
	}
</style>